<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;

      }

      #content {
        background: url(images/catlist_bg.gif) no-repeat;
        width: 980px;
        height: 500px;
        margin: auto;
      }

      #title {
        border-bottom: 1px dashed #000;
        height: 25px;
      }

      #title li {
        float: left;
        list-style: none;
        text-align: center;
        margin-left: 40px;
      }

      #title li:not(:nth-child(3)) {
        width: 160px;
      }

      #title li:nth-child(3) {
        width: 280px;
      }

      .list-item {
        border-bottom: 1px dashed #000;
        height: 130px;
        padding-top: 20px;
        padding-left: 0;
      }

      .list-item li input[type="checkbox"] {
        margin-top: 50px;
      }

      .list-item p {
        padding-top: 10px;
      }

      .list-item li {
        float: left;
        width: 240px;
        text-align: center;
        list-style: none;
        margin-left: 40px;
      }

      .list-item li:not(:nth-child(3)) {
        width: 160px;
      }

      .list-item li:nth-child(3) {
        width: 280px;
      }

      #list {
        padding-top: 80px;
        width: 980px;
      }
    </style>
  </head>

  <body>
    <div style="width: 1024px; margin: auto">
      <iframe
        src="head.html"
        frameborder="0"
        width="1024"
        scrolling="no"
      ></iframe>
      <div id="content">
        <div id="list">
          <ul id="title">
            <li><input type="checkbox" />全选</li>
            <li>商品图片</li>
            <li>商品名称/出售者/联系方式</li>
            <li>价格</li>
          </ul>
          <ul class="list-item">
            <li><input type="checkbox" /></li>
            <li><img src="images/list1.jpg" alt="" /></li>
            <li>
              <p>杜比环绕，家庭影院必备，超真实享受</p>
              <p>出售者:ling121212</p>
              <p>
                <img src="images/contactme.gif" alt="" />
                <img src="images/addfav.gif" alt="" />收藏
              </p>
            </li>
            <li>
              <p>一口价：</p>
              <span>2833.0</span>
            </li>
          </ul>
          <ul class="list-item">
            <li><input type="checkbox" /></li>
            <li><img src="images/list2.jpg" alt="" /></li>
            <li>
              <p>杜比环绕，家庭影院必备，超真实享受</p>
              <p>出售者:ling121212</p>
              <p>
                <img src="images/contactme.gif" alt="" />
                <img src="images/addfav.gif" alt="" />收藏
              </p>
            </li>
            <li>
              <p>一口价：</p>
              <span>2833.0</span>
            </li>
          </ul>
          <ul class="list-item">
            <li><input type="checkbox" /></li>
            <li><img src="images/list3.jpg" alt="" /></li>
            <li>
              <p>杜比环绕，家庭影院必备，超真实享受</p>
              <p>出售者:ling121212</p>
              <p>
                <img src="images/contactme.gif" alt="" />
                <img src="images/addfav.gif" alt="" />收藏
              </p>
            </li>
            <li>
              <p>一口价：</p>
              <span>2833.0</span>
            </li>
          </ul>
          <ul class="list-item">
            <li><input type="checkbox" /></li>
            <li><img src="images/list4.jpg" alt="" /></li>
            <li>
              <p>杜比环绕，家庭影院必备，超真实享受</p>
              <p>出售者:ling121212</p>
              <p>
                <img src="images/contactme.gif" alt="" />
                <img src="images/addfav.gif" alt="" />收藏
              </p>
            </li>
            <li>
              <p>一口价：</p>
              <span>2833.0</span>
            </li>
          </ul>
        </div>
      </div>
      <iframe
        src="footer.html"
        frameborder="0"
        width="1024"
        scrolling="no"
        style="margin-top: 50px"
      ></iframe>
    </div>
  </body>
</html>
